<template>
  <span>
    <template v-if="readonly">
      <template v-if="fieldInfo.type === 'text'">
        <span v-html="full_text(value_display)"> </span>
      </template>
      <template v-else-if="fieldInfo.type === 'html'">
        <span v-html="value_display"> </span>
      </template>

      <template v-else>
        {{ value_display }}
      </template>
    </template>

    <template v-else>
      <OInput
        v-model="value2"
        :placeholder="node.placeholder || node.string"
        @change="onChange"
      />
    </template>
  </span>
</template>

<script setup>
import OInput from '@/odoojs-antdv/OInput/OInput.vue'

import { useWidget } from './userWidget'

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const useData = useWidget(props, { emit })

const { fieldInfo, readonly, value_display } = useData
const { value2, onChange } = useData

function full_text(txt) {
  if (!txt) return txt
  return txt.replace(/\n/g, '<br/>')
}
</script>

<style type="text/css"></style>
